<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室 - 登录</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h1>💬 聊天室</h1>
                <p>输入用户名即可开始聊天</p>
            </div>
            
            <form id="loginForm" class="login-form">
                <div class="input-group">
                    <label for="username">用户名</label>
                    <input 
                        type="text" 
                        id="username" 
                        name="username" 
                        placeholder="请输入您的用户名" 
                        required 
                        maxlength="20"
                        autocomplete="off"
                    >
                    <div class="input-hint">用户名长度为2-20个字符</div>
                </div>
                
                <button type="submit" class="login-btn" id="loginBtn">
                    <span class="btn-text">进入聊天室</span>
                    <span class="btn-loading" style="display: none;">连接中...</span>
                </button>
            </form>
            
            <div class="error-message" id="errorMessage" style="display: none;"></div>
            
            <div class="login-footer">
                <div class="feature-list">
                    <div class="feature-item">
                        <span class="feature-icon">🚀</span>
                        <span>实时聊天</span>
                    </div>
                    <div class="feature-item">
                        <span class="feature-icon">👥</span>
                        <span>多人群聊</span>
                    </div>
                    <div class="feature-item">
                        <span class="feature-icon">📱</span>
                        <span>响应式设计</span>
                    </div>
                </div>
                
                <div class="status-info">
                    <div class="status-item">
                        <span class="status-dot online"></span>
                        <span>服务器在线</span>
                    </div>
                    <div class="online-count">
                        <span id="onlineCount">0</span> 人在线
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="js/login.js"></script>
</body>
</html>